<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter, LocationQuery } from 'vue-router'
import { form, params, dictionary, tableKeyList } from './conf'
import { formatDate } from '@/common/utils/utils'
import { useCurrentInstance } from '@/common/utils/methods'
import { ResponseType } from '@/common/types/response';

const { $confirm, $message, $axios, branchId, brandId } = useCurrentInstance();
const data = reactive({
  getData: false,
  totalNum: 0,
  list: [],
  params
})

// 禁用或删除
const enableOrDelete = (planIds: string[], status: number) => {
  $axios.post('/training.exam.api/plan/enableOrDelete', {
    branchId,
    brandId,
    planIds,
    status
  }).then((res: ResponseType) => {
    if (res.succeed) {
      $message.success('操作成功')
      data.getData = true
    } else {
      $message.error(res.msg)
    }
  })
}

// 删除
const enableItem = (id: string) => {
  const confirmText = `<p>确定禁用考试吗？</p><p style="font-size:12px;color:#999;">*禁用后无法开启。</p>`
  $confirm(confirmText, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    dangerouslyUseHTMLString: true,
    type: 'warning'
  }).then(() => {
    enableOrDelete([id], 0);
  }).catch(() => {
    console.log('用户取消操作');
  })
}

// 禁用
const deleteItem = (id: string) => {
  const confirmText = '确定删除考试吗？'
  $confirm(confirmText, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    dangerouslyUseHTMLString: true,
    type: 'warning'
  }).then(() => {
    enableOrDelete([id], -1);
  }).catch((e: any) => {
    console.log(e);
  })
}

// 跳转
const router = useRouter();
const openPage = (path: string, query?: LocationQuery) => {
  router.push({ path, query });
}
</script>

<template>
  <div>
    <ConditionView
      v-model:params="data.params"
      :form="form"
      :dictionary="dictionary"
      @search="data.getData = true"
    ></ConditionView>
    <p style="font-size:14px">共计{{ data.totalNum }}场考试</p>
    <ListView
      :tableKeyList="tableKeyList"
      :list="data.list"
      :dictionary="dictionary"
      fixed="right"
      :hasHandle="true"
    >
      <template #rightBtn>
        <el-button type="primary" @click="openPage('/exam/exams/add')">
          <el-icon>
            <plus />
          </el-icon>添加考试
        </el-button>
      </template>
      <template #tmRand="{ row }">
        <span
          v-if="row.cycleType == 1"
        >{{ formatDate(row.startTm, 'ymd') }} - {{ formatDate(row.endTm, 'ymd') }}</span>
        <span v-else>{{ formatDate(row.startTm) }} , {{ row.cycleTimes }}次</span>
      </template>
      <template #handle="{ row }">
        <el-button-group>
          <el-button :disabled="row.isEnabled !== 1" @click="enableItem(row.planId)">禁用</el-button>

          <el-button
            :disabled="row.enableEdit === 0"
            @click="openPage('/exam/exams/edit', { planId: row.planId, paperId: row.paperId })"
          >编辑</el-button>

          <el-button :disabled="row.status !== 3" @click="deleteItem(row.planId)">删除</el-button>

          <el-dropdown trigger="click">
            <el-button type="primary">更多</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  @click.native="openPage('/exam/exams/examinee', { planId: row.planId, title: row.title })"
                >考生配置</el-dropdown-item>
                <el-dropdown-item
                  @click.native="openPage('/exam/exams/situation', { planId: row.planId, title: row.title, status: row.status })"
                >考试情况</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
      </template>
    </ListView>
    <Pagination
      url="/training.exam.api/plan/list"
      v-model:list="data.list"
      v-model:getData="data.getData"
      :params="data.params"
      :autoLoad="true"
      @setTotalNum="(num: number) => (data.totalNum = num)"
    ></Pagination>
  </div>
</template>

<style scoped></style>